/*
 * @Date: 2022-02-14 17:36:03
 * @LastEditors: wuyuxin
 * @LastEditTime: 2022-02-16 14:40:45
 * @FilePath: \webpack-learning\04_webpack处理其他资源02\wk.config.js
 * @description: 文件描述
 */
const path = require('path')
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:8][ext]"
  },
  module: {
    rules: [
      {
        // 匹配规则使用正则表达式
        test: /\.css$/,// 匹配资源
        use: [
          // { loader: "css-loader" } // 标准写法
          // webpack处理顺序是从下往上，从右往左，从后往前的
          "style-loader", // 简写
          // "css-loader", // 简写
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
          // {
          //   loader: 'postcss-loader',
          //   options: {
          //     postcssOptions: {
          //       plugins: [
          //         // require("autoprefixer"),
          //         "postcss-preset-env" // 简写
          //         // require("postcss-preset-env")
          //       ]
          //     }
          //   }
          // }
        ],
        // loader: "css-loader" // 简写
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader",
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        // type: "asset/resource", // file-loader效果
        // type: "asset/inline", // url-loader效果
        type: "asset",
        generator: {
          filename: "img/[name].[hash:8][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:8][ext]"
        }
      }
    ]
  }
}